<template>
  <div>
    <h1>Bar</h1>
    <h2 style="color: red">
<!--      {{ $store.state.num }}-->
      {{ num }}
    </h2>
    <ol>
      <li v-for="item in list" :key="item.id">
        {{item.text}}
      </li>
    </ol>
    <h2 style="color: red">
      {{ numPI }}
<!--      {{ $store.getters.numPI }}-->
    </h2>
    <button @click="jian(10)">num--</button>
  </div>
</template>

<script>
import {
  mapState,
  mapGetters,
  mapMutations
} from 'vuex'

export default {
  name: "Bar",
  computed: {
    ...mapState(['list', 'num']),
    ...mapGetters(['numPI'])
    // list() {
    //   return this.$store.state.list
    // }
  },
  methods: {
    ...mapMutations(['jian']),
  }
}
</script>

<style scoped>

</style>